<template>
  <div class="ele-body">
    <el-row :gutter="15">
      <el-col :span="24">
        <el-card shadow="never"
                 body-style="padding: 0;">
          <el-tabs v-model="active"
                   class="user-info-tabs">
            <el-tab-pane label="阿里云短信配置"
                         name="info">
              <el-form ref="form"
                       :model="form"
                       :rules="rules"
                       label-width="140px"
                       style="padding: 34px 20px 0 20px"
                       @keyup.enter.native="save"
                       @submit.native.prevent>
                <el-form-item label="AccessKey ID:"
                              prop="accessKeyId"
                              label-width="150px"
                              class="delInput">
                  <div class="flex-align-center">
                    <el-input v-model="form.accessKeyId"
                              placeholder="请输入AccessKey ID"
                              clearable
                              style="width: 300px" />
                  </div>
                </el-form-item>
                <el-form-item label="AccessKey Secret:"
                              prop="accessKeySecret"
                              label-width="150px"
                              class="delInput">
                  <div class="flex-align-center">
                    <el-input v-model="form.accessKeySecret"
                              show-password
                              placeholder="请输入AccessKey Secret"
                              clearable
                              style="width: 300px" />
                  </div>
                </el-form-item>
                <el-form-item label="签名名称:"
                              prop="signatureName"
                              label-width="150px"
                              class="delInput">
                  <div class="flex-align-center">
                    <el-input v-model="form.signatureName"
                              placeholder="请输入签名名称"
                              clearable
                              style="width: 300px" />
                  </div>
                </el-form-item>
                <el-form-item label="验证码模版CODE:"
                              prop="captchaTemplateCode"
                              label-width="150px"
                              class="delInput">
                  <div class="flex-align-center">
                    <el-input v-model="form.captchaTemplateCode"
                              placeholder="请输入验证码模版CODE"
                              clearable
                              style="width: 300px" />

                  </div>
                </el-form-item>
                <el-form-item label="管理员手机号:"
                              prop="adminPhone"
                              label-width="150px"
                              class="delInput">
                  <div class="flex-align-center">
                    <el-input type="number"
                              v-model.number="form.adminPhone"
                              placeholder="请输入管理员手机号"
                              clearable
                              style="width: 300px" />
                  </div>
                </el-form-item>
                <!-- <el-form-item label="审核模版CODE:"
                              prop="auditTemplateCode"
                              label-width="150px"
                              class="delInput">
                  <div class="flex-align-center">
                    <el-input v-model="form.auditTemplateCode"
                              placeholder="请输入审核模版CODE"
                              clearable
                              style="width: 300px" />
                    <el-button style="margin-left: 10px"
                               type="primary"
                               :loading="loading"
                               @click="viewCode(1)">
                      查看
                    </el-button>
                  </div>
                </el-form-item>
                <el-form-item label="审核通过模版CODE:"
                              prop="auditPassTemplateCode"
                              label-width="150px"
                              class="delInput">
                  <div class="flex-align-center">
                    <el-input v-model="form.auditPassTemplateCode"
                              placeholder="请输入审核通过模版CODE"
                              clearable
                              style="width: 300px" />
                    <el-button style="margin-left: 10px"
                               type="primary"
                               :loading="loading"
                               @click="viewCode(2)">
                      查看
                    </el-button>
                  </div>
                </el-form-item>
                <el-form-item label="审核拒绝模版CODE:"
                              prop="auditRefuseTemplateCode"
                              label-width="150px"
                              class="delInput">
                  <div class="flex-align-center">
                    <el-input v-model="form.auditRefuseTemplateCode"
                              placeholder="请输入审核拒绝模版CODE"
                              clearable
                              style="width: 300px" />
                    <el-button style="margin-left: 10px"
                               type="primary"
                               :loading="loading"
                               @click="viewCode(3)">
                      查看
                    </el-button>
                  </div>
                </el-form-item> -->
                <el-form-item>
                  <el-button type="primary"
                             :loading="loading"
                             @click="save">
                    保存更改
                  </el-button>
                </el-form-item>
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
    <el-image-viewer v-if="showViewer"
                     style="z-index: 9999"
                     :on-close="closeViewer"
                     :url-list="listArry" />
  </div>
</template>
  
  <script>
import ElImageViewer from 'element-ui/packages/image/src/image-viewer';
import {
  getSiteSmsConfig, siteSmssave
} from '@/api/agent/smsConfiguration/index.js';
export default {
  name: 'messageNotify',

  components: { ElImageViewer },
  data () {
    return {
      // tab页选中
      active: 'info',
      form: {
        //  accessKeyId
        accessKeyId: '',
        // AccessKeySecret
        accessKeySecret: '',
        // 签名名称
        signatureName: '',
        //验证码模板CODE
        captchaTemplateCode: '',
        //管理员手机
        adminPhone: '',
        //审核模板CODE
        auditTemplateCode: '',
        //审核通过模板CODE
        auditPassTemplateCode: '',
        //审核拒绝模板CODE
        auditRefuseTemplateCode: '',
        oemId: this.$store.state.user.info.oemId
      },

      url: '',
      urlListArray: [
        'https://cshsxxx.dns06.com/static/images/note/zty-verify.jpg',
        'https://cshsxxx.dns06.com/static/images/note/zty-check.jpg',
        'https://cshsxxx.dns06.com/static/images/note/zty-check-agree.jpg',
        'https://cshsxxx.dns06.com/static/images/note/zty-check-refuse.jpg',
        'https://cshsxxx.dns06.com/static/images/note/zty-verify.jpg'
      ],
      listArry: [],
      showViewer: false,
      // 保存按钮loading
      loading: false,
      // 是否显示裁剪弹窗
      visible: false,
      rules: {
        accessKeyId: [
          {
            required: true,
            message: '请输入accessKeyId',
            trigger: 'blur'
          }
        ],
        accessKeySecret: [
          {
            required: true,
            message: '请输入accessKeySecret',
            trigger: 'blur'
          }
        ],
        signatureName: [
          {
            required: true,
            message: '请输入签名名称',
            trigger: 'blur'
          }
        ],
        // captchaTemplateCode: [
        //   {
        //     required: true,
        //     message: '请输入验证码模板CODE',
        //     trigger: 'blur'
        //   }
        // ],
        adminPhone: [
          {
            required: true,
            message: '请输入验管理员手机',
            trigger: 'blur'
          }
        ],
        // auditTemplateCode: [
        //   {
        //     required: true,
        //     message: '请输入审核模板CODE',
        //     trigger: 'blur'
        //   }
        // ],
        // auditPassTemplateCode: [
        //   {
        //     required: true,
        //     message: '请输入审核通过模板CODE',
        //     trigger: 'blur'
        //   }
        // ],
        // auditRefuseTemplateCode: [
        //   {
        //     required: true,
        //     message: '请输入审核拒绝模板CODE',
        //     trigger: 'blur'
        //   }
        // ]
      }
    };
  },
  computed: {
    // 是否开启响应式布局
    styleResponsive () {
      return this.$store.state.theme.styleResponsive;
    }
  },
  created () {
    this.querys();
  },
  methods: {
    querys () {
      // 查询回显
      getSiteSmsConfig({
        oemId: this.$store.state.user.info.oemId
      })
        .then((res) => {
          const msg = res.data
          console.log(msg);
          if (msg && msg.id) {
            //   是修改
            this.$util.assignObject(this.form, {
              ...msg
            });
            this.form.id = msg.id;
            this.isUpdata = true;
          } else {
            // 修改
            this.isUpdata = false;
          }
        })
        .catch((e) => {
          this.$message.error(e.message);
        });
    },
    viewCode (index) {
      this.listArry = [];
      this.listArry.push(this.urlListArray[index]);
      console.log(this.listArry);
      this.showViewer = true;
    },
    // 关闭查看器
    closeViewer () {
      this.showViewer = false;
    },
    /* 表单提交 */
    save () {
      this.$refs['form'].validate((valid, obj) => {
        if (valid) {
          const data = {
            ...this.form
          };
          console.log(data)

          const saveOrUpdate = this.isUpdata ? siteSmssave : siteSmssave;
          saveOrUpdate(data)
            .then((msg) => {
              this.loading = false;
              // id 不存在则调用查询是否已保存，否则保存多次都会不传id
              // if(!this.form.id){
              this.querys();
              // }
              this.$message.success('提交成功！');
            })
            .catch((e) => {
              this.loading = false;
              this.$message.error(e.message);
            });
        } else {
          this.validMsg = ` 共有校验 ${Object.keys(obj).length} 项不通过`;
          return false;
        }
      });
    }
  }
};
  </script>
  
  <style lang="less" scoped>
/*隐藏input（type=number)右边的小箭头*/
/deep/.delInput input::-webkit-outer-spin-button,
/deep/.delInput input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}
/deep/.delInput input[type='number'] {
  -moz-appearance: textfield;
}
.ele-body {
  padding-bottom: 0;
}

.el-card {
  margin-bottom: 15px;
}

/* 用户资料卡片 */
.user-info-card {
  padding: 8px 0;
  text-align: center;

  .user-info-avatar-group {
    position: relative;
    cursor: pointer;
    margin: 0 auto;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    overflow: hidden;

    & > i {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #fff;
      font-size: 30px;
      display: none;
      z-index: 2;
    }

    &:hover {
      & > i {
        display: block;
      }

      &:after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.3);
      }
    }
  }

  .user-info-avatar {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    object-fit: cover;
  }

  .user-info-name {
    font-size: 24px;
    margin-top: 20px;
  }

  .user-info-desc {
    margin-top: 8px;
  }
}

/* 用户信息列表 */
.user-info-list {
  margin-top: 30px;

  .user-info-item {
    margin-bottom: 16px;
    display: flex;
    align-items: baseline;

    & > i {
      margin-right: 10px;
      font-size: 16px;
    }

    & > span {
      flex: 1;
      display: block;
    }
  }
}

/* 用户标签 */
.user-info-tags .el-tag {
  margin: 10px 10px 0 0;
}

/* 用户账号绑定列表 */
.user-account-list {
  padding: 16px 20px;

  .user-account-item {
    padding: 15px;

    .ele-text-secondary {
      margin-top: 6px;
    }

    .user-account-icon {
      width: 42px;
      height: 42px;
      line-height: 42px;
      text-align: center;
      color: #fff;
      font-size: 26px;
      border-radius: 50%;
      background-color: #3492ed;
      box-sizing: border-box;

      &.el-icon-_wechat {
        background-color: #4daf29;
        font-size: 28px;
      }

      &.el-icon-_alipay {
        background-color: #1476fe;
        padding-left: 5px;
        font-size: 32px;
      }
    }
  }
}

/* tab 页签 */
.user-info-tabs {
  :deep(.el-tabs__nav-wrap) {
    padding-left: 24px;
  }

  :deep(.el-tabs__item) {
    height: 50px;
    line-height: 50px;
    font-size: 15px;
  }
}
</style>
  